Un array en un conjunto de datos almacenados sobre una matriz. Estos datos están ordenados por un índice que toma el valor cero para el primer elemento, de forma similar a como trabajamos con cadenas de texto.
El array permite el acceso a un dato concreto del mismo con la notación array[índice], y esta misma notación también permite añadir datos al array en la posición indicada por el índice. Lo que significa que podemos tener posiciones vacías dentro de un array al usar esta forma de añadirle contenido.
let frutas = ['pera', 'plátano', 'manzana'];
let mifruta = frutas[1];
console.log(mifruta); => 'plátano';
frutas[5] = 'uvas';
console.log(frutas.length) => 6 (porque hemos añadido algo en la posición 5, dejando 3 posiciones vacías);
Es un método para añadir elementos al final del array, sin dejar espacios vacíos. Y permite insertar varios valores a la vez, si lo separamos por comas en los argumentos del método.
let frutas = ['pera', 'plátano', 'manzana'];
frutas.push('uvas'); => Añade un elemento nuevo al final del array
console.log(frutas.length) => Devuelve 4
En este caso el método elimina el último elemento del array. No necesita de ningún parámetro, siempre elimina el último valor.
frutas.pop(); => En el ejemplo anterior elimina la última entrada (uvas);
Este método hace lo mismo que push(), pero en este caso añade el elemento al principio del array, cambiando también los índices para el resto de elementos. Permite añadir más de un elemento a la vez, como parámetros separados por comas dentro de los paréntesis.
let frutas = ['pera', 'plátano', 'manzana'];
console.log(frutas[0]); => 'pera'
frutas.unshift('uvas'); => Añade 'uvas' al principio del array y cambia índices
console.log(frutas[0]); => 'uvas'
Este método elimina el primer elemento del array, y redefine los índices después.
frutas.shift() => En el ejemplo anterior elimina el primer elemento ('uvas');
Se puede usar la instrucción delete para eliminar el contenido de un elemento del array usando su posición. Pero de esta forma solo vaciamos el elemento, no lo eliminamos por completo, con lo que nos quedarán posiciones vacías en nuestro array al usarlo. La forma de eliminar es: delete frutas[0]
let frutas = ['pera', 'plátano', 'manzana'];
delete frutas[1];
console.log(frutas) => ['pera',,'manzana']
console.log(frutas.length) => 3
Este método permite tanto eliminar como añadir elementos al array en una sola operación. Su pirmer argumento indica la posición del array en la cual queremos realizar la modificación, por lo que tiene que ser un número de índice válido. El segundo argumento indica el número de elementos a eliminar desde esa posición. También tiene que ser un dato numérico y puede ser igual a cero si no queremos eliminar nada. Y el tercer argumento y siguientes (no hay límite) son los elementos que queremos añadir a partir de esa posición.
let frutas = ['pera', 'plátano', 'manzana'];
frutas.splice(1,0,'uvas');
console.log(frutas) => ['pera','uvas,' 'plátano', 'manzana']
let frutas = ['pera', 'plátano', 'manzana'];
frutas.splice(1,1,'uvas');
console.log(frutas) => ['pera','uvas,' 'manzana']
let frutas = ['pera', 'plátano', 'manzana'];
frutas.splice(0,3,'uvas','sandia', 'melón');
console.log(frutas) => ['uvas','sandia', 'melón']
let frutas = ['pera', 'plátano', 'manzana'];
frutas.splice(1,1);
console.log(frutas) => ['pera', 'manzana'];
Vamos a generar una lista HTML con los valores que inserte el usuario en un input, almacenando al mismo tiempo esos valores en un array que pueda ser utilizado posteriormente a lo largo del código.
Ahora usamos los datos del array para generar un elemento select, que permita eliminar al contacto seleccionado de nuestra lista.
Este método está disponible para todos los objetos de JavaScript, y devuelve una cadena de caracteres con el contenido del objeto. En este caso devuelve los elementos del array separados por comas.
En el caso de los arrays este método es poco útil, porque realmente no es necesario convertir a texto el array para mostrar sus valores separados por comas en el DOM. Si probamos a volcar un array directamente en el DOM sin este método encontramos el mismo resultado:
let frutas = ['pera', 'plátano', 'manzana'];
document.querySelector('#string').innerHTML= frutas.toString();
devuelve lo mismo en el p#string que esto:
document.querySelector('#string').innerHTML= frutas;
Hace algo similar a toString(), pero en este caso podemos indicar qué separador usamos entre los elementos del array
let frutas = ['pera', 'plátano', 'manzana'];
console.log(frutas.join('-')) => pera-plátano-manzana
console.log(frutas.join(' ')) =>pera plátano manzana
console.log(frutas.join('')) =>peraplátanomanzana
Este método combina en un nuevo array dos o más arrays existentes. También admite valores de texto para ser combinados en el nuevo array.
let frutas = ['pera', 'plátano', 'manzana'];
let verduras = ['col', 'habas', 'espinacas'];
let secos = ['cacahuetes','almendras']
let fyv = frutas.concat(verduras, secos, 'mandarinas');
console.log(fyv); => [ "pera", "plátano", "manzana", "col", "habas", "espinacas", "cacahuetes", "almendras", "mandarinas"]
Este método sirve para dividir o trocear un array, extrayendo una parte de él a un nuevo array. Y como en el resto de métodos sobre arrays, su aplicación no modifica el array original.
El método cuenta con dos parámetros numéricos que indican la posición inicial y la posición final para extraer los elementos. Laq posición final no se incluye en los elementos extraídos.
Si se omite el segundo argumento, el método extrae desde la posición inicial hasta el final del array.
sobre el ejemplo anterior:
fyv.slice(2,7) => ["manzana", "col", "habas", "espinacas", "cacahuetes"];
fyv.slice(6) => ["cacahuetes", "almendras", "mandarinas"];
En este grupo tenemos métodos que permiten ejecutar una función para cada elemento de un array, y métodos que devuelven nuevos arrays a partir de cada elemento del array sobre el que trabajamos.
Todos ellos tienen 3 argumentos que pueden ser usados en las respectivas funciones, y que aparecen siempre en el mismo orden: el valor actual del elemento, el índice del elemento, y el array completo. No es necesario usar estos argumentos siempre con los métodos, ni usarlos todos. Pero si lo hacemos tenemos que nombrarlo en este orden, que es el que espera cada método.
Este método ejecuta una función por cada elemento del array, es decir ejecuta la misma función tantas veces como elementos tiene el array, y permite recibir los parámetros indicados
let frutas = ['pera', 'plátano', 'manzana'];
let salida_txt = '';
frutas.forEach(listaFrutas);
function listaFrutas(valor,pos) {
salida_txt += 'La fruta número ' + (pos + 1) + ' es ' + valor + '<br>';
document.querySelector('#frutas').innerHTML = salida_txt;
}
Este método aplica una función sobre cada uno de los elementos del array para retornar un nuevo array, con la misma longitud de elementos.
Para devolver el elemento al nuevo array tenemos que usar la expresión return en la función invocada.
let valores = [10, 20, 30, 40];
let cuadrados = valores.map(hazCuadrado);
function hazCuadrado(x) {
return x * x;
}
console.log(cuadrados) => [ 100, 400, 900, 1600 ]
Sirve para obtener un nuevo array aplicando una condición de filtro sobre los elementos del array original. También es un método de retorno de valores, por lo que la función usada debe terminar con la instrucción return para alamacenar el valor resultante en el nuevo array.
Este método lleva implícita una condición de tipo if: Si los valores cumplen con la condición pasan al array, pero no es necsaria escribirla directamente en la función.
let valores = [10, 20, 30, 40];
let mayores20 = valores.filter(sobre20);
function sobre20(x) {
return x > 20;
}
console.log(mayores20) => [30,40];
Ejemplo para filtrar elementos de texto
let frutas = ['pera', 'plátano', 'manzana', 'melón', 'Piña', 'pomelo', 'aguacate'];
let frutas_p = frutas.filter(empiezaP);
function empiezaP(fruta) {
return fruta[0].toLowerCase() == 'p' && fruta[fruta.length - 1] == 'a';
}
console.log(frutas_p); => ['pera', 'Piña'];
Este método hace lo mismo que filter() pero devuelve un único elemento, y lo hace como elemento y no como array. El elemento devuelto es el primero del array que cumple con la condición expresada.
let valores = [10, 20, 30, 40];
let mayores20 = valores.find(sobre20);
function sobre20(x) {
return x > 20;
}
console.log(mayores20) => 30;
Este método recorre cada elemento agrupándolo con el elemento siguiente para terminar con un único valor al final del recorrido por el array. Reduce la colección de datos a un solo valor al final del proceso.
Este método incorpora un cuarto parámetro delante de los otros 3 que hace referencia al resultado de la operación que estemos realizando sobre el elemento anterior.
let valores = [10, 20, 30, 40];
let suma = valores.reduce(funcionSuma);
function funcionSuma(total, x) {
return total + x;
}
console.log(suma) => 100
Existe el método reduceRight() que hace lo mismo que reduce() pero recorriendo el array de derecha a izquierda.
Son métodos que trabajan de la misma forma que lo hacen con las cadenas. Devuelven la posición de la primera aparición un elemento dentro de un array, o de la última aparición respectivamente. En caso de no encontrarse el elemento en el array devuelven el valor -1.
Igual que en el caso de las cadenas, el método admite un segundo parámetro para indicar a partir de qué posición debe empezar a buscar.
console.log(frutas.indexOf('manzana')) => 2
Son métodos que devuelven un valor booleano (true o false). El primero devuelve true cuando todos los elementos del array cumplen con la condición que estemos especificando, y en caso contrario devuelve false. Y el segundo devuelve true cuando al menos uno de los elementos cumpla la condicón, y false cuando ninguno cumpla.
Se pueden entender como el resultado de aplicar un operador de tipo AND (&&) en el caso de every() o de tipo OR (||) en el caso de some() sobre cada elemento del array.
Ejemplo para comprobar si todos los valores del array edad son mayores de edad:
let edades = [18, 20, 30, 40];
let mayoresEdad = edades.every(esMayor);
function esMayor(x) {
return x >= 18;
}
console.log(mayoresEdad) => true
pero así:
let edades = [10, 20, 30, 40];
console.log(mayoresEdad) => false
Ejemplo que comprueba si al menos una de las frutas almacenadas en el array comienza por la letra "a"
let frutas_a = frutas.some(empiezaA);
function empiezaA(fruta) {
return fruta[0].toLowerCase() == 'a';
}
console.log(frutas_a) => true;
Este método ordena los elementos de un array. A diferencia de los demás, este sí modifica directamente el array que contiene los datos, alterando las posiciones de cada elemento según lo ordenemos de forma ascendente o descendente.
Si el array contiene únicamente valores de texto y queremos ordenar de forma ascendente es suficiente con aplicar el método directamente sobre el array. Algo así:
frutas.sort(); => Cambia los valores en el array, no en una copia;
Este método no tiene en cuenta los valores numéricos, tratándolos como cadenas de texto, y al aplicarlo sobre números tendremos resultados erroneos: 10, 100 antes que 2.
Para ordenar números usamos una función de comparación con el método sort:
sort(function (a,b){
return a - b;
})
Y si queremos ordenar de forma descendente:
sort(function (a,b){
return b - a;
})
Cuando tenemos que ordenar texto de forma descendente, usamos la misma función, pero cambiando el operador - por <. Y si queremos usar la funcón para ordenar texto ascendente (cosa que ya hace directamente el método sort()) usamos el operador >. En el caso del texto la función debe tener en cuenta de forma explícita el que los valores a ordenar sean iguales para evitar errores en algunos navegadores.
function (a, b) {
if (a === b) {
return 0;
} else {
return a > b ? 1 : -1; }
}
En caso de ordenar arrays multidimensionales usamos la misma función, pero indicando el índice del elemento por el que queremos ordenar:
mi_array.sort((a, b) => a[1] - b[1] ) => Ordena datos numéricos por el segundo elemento del array (índice [1])
Y si son datos tipo texto:
mi_array.sort(function (a, b) {
if (a[0] === b[0]) {
return 0;
} else {
return a[0] > b[0] ? 1 : -1;
}
})
Los ejemplos del método sort() están explicados en el documento ordenarArray.html, en esta misma carpeta de apuntes.